<script setup>
import {ref} from 'vue'
import {Head, useForm} from '@inertiajs/vue3';
import {Message} from "@arco-design/web-vue";
import {route} from "ziggy-js";

const captchaSrc = ref(`/captcha/math?t=${Math.random()}`)
const FormRef = ref()
const form = useForm({
    phone: '',
    password: '',
    captcha: '',
    remember: false,
})

const handlePhone = (value, callback) => {
    if (!value) {
        callback(new Error('请输入注册手机号'))
        return false
    }
    if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的手机号'))
        return false
    }
    callback()
}
const handlePassword = (value,callback) => {
    if(!value){
        callback(new Error('请输入确认密码'))
        return false
    }
    if (!/^(?=.*[A-Za-z])(?=.*\d).+$/.test(value)) { // 修正正则表达式
        callback(new Error('密码必须包含至少一个字母和一个数字'))
        return false
    }
    callback()
}

const rules = ref({
    phone: [
        {required: true, length: 11, message: '请输入正确的手机号',validator:handlePhone, tigger: ['blur']},
    ],
    password: [
        {required: true, message: '请输入正确的密码',tigger: ['blur']},
        {required: true, message: '请输入密码长度6-16位', minLength: 6, maxLength: 16,tigger: ['blur']},
        {required: true, message: '请输入密码必须包含字母和数字', validator:handlePassword, tigger: ['blur']}
    ],
    captcha: [{required: true, message: '请输入图形验证码'}],
})

const reloadCaptcha = () => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
}

const handleSubmit = async() => {
    const flag = await FormRef.value.validate();
    if (flag){
        return ;
    }

    form.post(route('admin.authenticate'), {
        onSuccess: () => {
            Message.success('登录成功')
        },
        onError: (errors) => {
            console.log(errors)
            reloadCaptcha()
            const fields = {};
            // 遍历所有错误
            for (const [fieldName, messages] of Object.entries(errors)) {
                // 构造字段对象
                fields[fieldName] = {
                    status: 'error',
                    message: messages
                };
            }
            FormRef.value.setFields(fields);
        }
    })
}

onMounted(() => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
})
</script>

<template>
    <Head>
        <title>登录 - 预约收银系统</title>
    </Head>
    <div
        class="absolute inset-0 size-full flex justify-center items-center bg-cover bg-center bg-no-repeat bg-[url('/static/images/login-bg.webp')]">
        <div class="flex justify-between items-center">
            <a-card
                :body-style="{ padding: '48px 32px' }"
                :bordered="false"
                :header-style="{ borderBottom: 'none' }"
                :hoverable="true"
                :style="{
                    borderRadius: '12px',
                    boxShadow: '0 10px 30px 0 rgba(0, 0, 0, 0.1)',
                }"
                class="w-[480px]"
            >
                <a-space direction="vertical" fill>
                    <div class="flex flex-col items-center gap-3 select-none">
                        <div class="logo">
                            <img
                                :style="{ width: '60px', height: '60px' }"
                                alt="大脸猫发卡"
                                src="/static/images/logo-w.png"
                            />
                        </div>
                        <h3 class="text-xl font-serif font-bold text-black">
                            预约收银管理系统
                        </h3>
                    </div>

                    <a-form
                        ref="FormRef"
                        :model="form"
                        :rules="rules"
                        :style="{ width: '100%' }"
                        class="mt-16"
                        layout="vertical"
                        size="large"
                        @submit="handleSubmit"
                    >
                        <a-form-item
                            :hide-label="true"
                            field="phone"
                        >
                            <a-input
                                v-model="form.phone"
                                allow-clear
                                autocomplete="off"
                                placeholder="请输入你的手机号"
                            >
                                <template #prefix>
                                    <icon-mobile/>
                                </template>
                            </a-input>
                        </a-form-item>

                        <a-form-item
                            :hide-label="true"
                            field="password"
                        >
                            <a-input-password
                                v-model="form.password"
                                allow-clear
                                autocomplete="off"
                                placeholder="请输入你的密码"
                            >
                                <template #prefix>
                                    <icon-lock/>
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item
                            :hide-label="true"
                            field="captcha"
                        >
                            <div class="flex items-center w-full gap-3">
                                <a-input
                                    v-model="form.captcha"
                                    allow-clear
                                    autocomplete="off"
                                    class="flex-1"
                                    placeholder="请输入图形验证码"

                                >
                                    <template #prefix>
                                        <icon-safe/>
                                    </template>
                                </a-input>
                                <div class="w-[120px]" @click="reloadCaptcha">
                                    <img :src="captchaSrc" alt="图形验证码"/>
                                </div>
                            </div>
                        </a-form-item>
                        <a-form-item>
                            <a-checkbox v-model="form.remember" value="true">记住密码</a-checkbox>
                        </a-form-item>
                        <a-form-item>
                            <a-button html-type="submit" long size="large" type="primary"> 登录</a-button>
                        </a-form-item>
                    </a-form>
                </a-space>

            </a-card>
        </div>
    </div>
</template>

<style scoped>

</style>
